<template>
    <div class="home">
        <div class="row">
            <div class="item">
                <dv-border-box1 ref="borderRef">
                    <div class="box-item">
                        <!-- dataV 内部的元素 -->
                        <dv-decoration-12 style="width:150px;height:150px;" />
                    </div>
                </dv-border-box1>
            </div>
            <div class="item">
                <dv-border-box12>
                    <div dv-bg>
                        <div style="width: 740px;height: 600px;">
                            <dv-flyline-chart-enhanced :config="config" :dev="true" style="width:100%;height:100%;" />
                        </div>
                    </div>
                </dv-border-box12>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import mapImg from "@/assets/images/bgc.jpg";

let config = reactive({
    points: [
        {
            name: '郑州',
            coordinate: [0.48, 0.35],
            halo: {
                show: true,
            },
            text: {
                show: false
            }
        },
        {
            name: '新乡',
            coordinate: [0.52, 0.23]
        },
        {
            name: '焦作',
            coordinate: [0.43, 0.29]
        },
        {
            name: '开封',
            coordinate: [0.59, 0.35]
        },
        {
            name: '许昌',
            coordinate: [0.53, 0.47]
        },
        {
            name: '平顶山',
            coordinate: [0.45, 0.54]
        },
        {
            name: '洛阳',
            coordinate: [0.36, 0.38]
        },
        {
            name: '周口',
            coordinate: [0.62, 0.55]
        },
        {
            name: '漯河',
            coordinate: [0.56, 0.56]
        },
        {
            name: '南阳',
            coordinate: [0.37, 0.66]
        },
        {
            name: '信阳',
            coordinate: [0.55, 0.81]
        },
        {
            name: '驻马店',
            coordinate: [0.55, 0.67]
        },
        {
            name: '济源',
            coordinate: [0.37, 0.29]
        },
        {
            name: '三门峡',
            coordinate: [0.20, 0.36]
        },
        {
            name: '商丘',
            coordinate: [0.76, 0.41]
        },
        {
            name: '鹤壁',
            coordinate: [0.59, 0.18]
        },
        {
            name: '濮阳',
            coordinate: [0.68, 0.17]
        },
        {
            name: '安阳',
            coordinate: [0.59, 0.10]
        }
    ],
    lines: [
        {
            source: '新乡',
            target: '郑州'
        },
        {
            source: '焦作',
            target: '郑州'
        },
        {
            source: '开封',
            target: '郑州'
        },
        {
            source: '许昌',
            target: '郑州'
        },
        {
            source: '平顶山',
            target: '郑州'
        },
        {
            source: '洛阳',
            target: '郑州'
        },
        {
            source: '周口',
            target: '郑州'
        },
        {
            source: '漯河',
            target: '郑州'
        },
        {
            source: '南阳',
            target: '郑州'
        },
        {
            source: '信阳',
            target: '郑州'
        },
        {
            source: '驻马店',
            target: '郑州'
        },
        {
            source: '济源',
            target: '郑州'
        },
        {
            source: '三门峡',
            target: '郑州'
        },
        {
            source: '商丘',
            target: '郑州'
        },
        {
            source: '鹤壁',
            target: '郑州'
        },
        {
            source: '濮阳',
            target: '郑州'
        },
        {
            source: '安阳',
            target: '郑州'
        }
    ],
    text: {
        show: true,
    },
    k: 0.5,
    bgImgSrc: mapImg,
})
</script>

<style lang="scss" scoped>
.home {
    width: 100%;
    height: 100%;

    .row {
        display: flex;
        justify-content: space-between;

        .item {
            width: 45%;
            height: 300px;

            .box-item {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
</style>